<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge;Chrome=1">
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon.ico">
    <title>后台登录</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Soi个人博客"/>

    <!-- 引入Materialize css -->
    <link rel="stylesheet" href="/assets/materialize/css/materialize.min.css">
    <link rel="stylesheet" href="/assets/css/prism.css">
    <link rel="stylesheet" href="/assets/css/style-fullscreen.css">
    <link rel="stylesheet" href="/assets/css/perfect-scrollbar.css" media="screen,projection">
    <link rel="stylesheet" type="text/css" href="/assets/layer/skin/layer.css">

    <style>
        html, body {
            height: 100%;
        }

        html {
            display: table;
            margin: auto;
        }

        body {
            display: table-cell;
            vertical-align: middle;
            background-color : #00bcd4 !important;
        }

    </style>
</head>
<body>
<div id="login-page" class="row" style="width: 400px;">
    <div class="col s12 z-depth-4 card-panel">
        <form id="login_form" class="login-form" action="/admin/token" method="post">
            <div class="row margin">
                <div class="input-field col s12 center">
                    <h5 class="center login-form-text teal-text">后台登录</h5>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s12 center">
                    <i class="mdi-social-person-outline prefix"></i>
                    <input id="username" name="account.username" type="text">
                    <label for="username" class="center-align">用户名</label>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s12">
                    <i class="mdi-action-lock-outline prefix"></i>
                    <input id="password" name="account.password" type="password">
                    <label for="password">密&nbsp;&nbsp;码</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12 m12 l12  login-text">
                    <input type="checkbox" id="remember-me"/>
                    <label for="remember-me">记住密码</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <button id="submit" type="button" class="btn waves-effect waves-light col s12">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/assets/js/jq/jquery-1.11.3.js"></script>
<script src="/assets/materialize/js/materialize.min.js"></script>
<script type="text/javascript" src="/assets/layer/layer.js"></script>
<script type="text/javascript">
       $(document).ready(function(){
            $('#submit').on('click',function () {
                // body...
                submit_form();
            });
        
            document.onkeydown = function(e){
                var ev = document.all ? window.event : e;
                if(ev.keyCode==13) {
                    submit_form();
                }
             }
       });
                
        function submit_form(){
            if (check_form()) {
                $.post('/admin/token',$('#login_form').serialize(),function(r){
                    if(r){
                        r = $.parseJSON(r);
                        console.log(r);
                        if(r.code == 100) {
                            layer.msg(r.message);
                            location.href = "/admin";
                        } else if(r.code == 101){
                            layer.msg(r.message);
                            $('#password').val() = '';
                        }
                    } else {
                        layer.msg('网络异常');
                    }
                });
            };
        }
        
        function check_form () {
            // body...
            if ($.trim($('#username').val()) == '') {
                layer.msg('用户名不能为空！',{
                    icon:5
                });
                return false;
            };
            if ($.trim($('#password').val()) == '') {
                layer.msg('密码不能为空！',{
                    icon:5
                });
                return false;
            };
            return true;
        }
</script>
</body>
</html>